<template>
  <el-row id="exam-add-box">
    <Breadcrumb :breadcrumb="breadcrumb" />
    <el-row class="goBack-box">
      <el-button id="auditButton" class="buttonStyle2" @click="goBack()">取消并返回所有题目</el-button>
    </el-row>
    <el-row id="exam-box">
      <el-row class="exam-item">
        <el-col :span="2">
          <label>题目难度</label>
        </el-col>
        <el-col :span="20">
          <!-- <div v-if="!problemBoxshows.nameBoxshow">
            <span class="exam-item-content">{{choiceDifficulty}}</span>
            <label class="exam-update" @click="problemBoxshows.nameBoxshow = !problemBoxshows.nameBoxshow">修改</label>
          </div>
          <el-row v-if="problemBoxshows.nameBoxshow">
            <el-col :span="18">
              <el-input v-model="choiceDifficulty" ></el-input>
            </el-col>
            <el-col :span="4">
              <label class="exam-update" @click="problemBoxshows.nameBoxshow = !problemBoxshows.nameBoxshow">确定</label>
              <label class="exam-update-red" @click="problemBoxshows.nameBoxshow = !problemBoxshows.nameBoxshow">取消</label>
            </el-col>
          </el-row>-->
          <div>
          <el-radio v-model="choiceDifficulty" label="简单">简单</el-radio>
          <el-radio v-model="choiceDifficulty" label="中等">中等</el-radio>
          <el-radio v-model="choiceDifficulty" label="困难">困难</el-radio>

          </div>
        </el-col>

        <el-button type="success" icon="el-icon-check" circle @click.prevent="register"></el-button>
      </el-row>
      <el-row class="exam-item">
        <el-col :span="2">
          <label>题干</label>
        </el-col>
        <el-col :span="20">
          <div v-if="!problemBoxshows.stemBoxshow">
            <span class="exam-item-content">{{choiceProblem}}</span>
            <label
              class="exam-update"
              @click="problemBoxshows.stemBoxshow = !problemBoxshows.stemBoxshow"
            >修改</label>
          </div>
          <el-row v-if="problemBoxshows.stemBoxshow">
            <el-col :span="18">
              <el-input v-model="choiceProblem"></el-input>
            </el-col>
            <el-col :span="4">
              <label
                class="exam-update"
                @click="problemBoxshows.stemBoxshow = !problemBoxshows.stemBoxshow"
              >确定</label>
              <label
                class="exam-update-red"
                @click="problemBoxshows.stemBoxshow = !problemBoxshows.stemBoxshow  "
              >取消</label>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="exam-item">
        <el-col :span="2">
          <label>选项1</label>
        </el-col>
        <el-col :span="20">
          <div v-if="!problemBoxshows.Op1Boxshow">
            <span class="exam-item-content">{{choiceOp1}}</span>
            <label
              class="exam-update"
              @click="problemBoxshows.Op1Boxshow = !problemBoxshows.Op1Boxshow"
            >修改</label>
          </div>
          <el-row v-if="problemBoxshows.Op1Boxshow">
            <el-col :span="18">
              <el-input v-model="choiceOp1"></el-input>
            </el-col>
            <el-col :span="4">
              <label
                class="exam-update"
                @click="problemBoxshows.Op1Boxshow = !problemBoxshows.Op1Boxshow"
              >确定</label>
              <label
                class="exam-update-red"
                @click="problemBoxshows.Op1Boxshow = !problemBoxshows.Op1Boxshow  "
              >取消</label>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="exam-item">
        <el-col :span="2">
          <label>选项2</label>
        </el-col>
        <el-col :span="20">
          <div v-if="!problemBoxshows.Op2Boxshow">
            <span class="exam-item-content">{{choiceOp2}}</span>
            <label
              class="exam-update"
              @click="problemBoxshows.Op2Boxshow = !problemBoxshows.Op2Boxshow"
            >修改</label>
          </div>
          <el-row v-if="problemBoxshows.Op2Boxshow">
            <el-col :span="18">
              <el-input v-model="choiceOp2"></el-input>
            </el-col>
            <el-col :span="4">
              <label
                class="exam-update"
                @click="problemBoxshows.Op2Boxshow = !problemBoxshows.Op2Boxshow"
              >确定</label>
              <label
                class="exam-update-red"
                @click="problemBoxshows.Op2Boxshow = !problemBoxshows.Op2Boxshow  "
              >取消</label>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="exam-item">
        <el-col :span="2">
          <label>选项3</label>
        </el-col>
        <el-col :span="20">
          <div v-if="!problemBoxshows.Op3Boxshow">
            <span class="exam-item-content">{{choiceOp3}}</span>
            <label
              class="exam-update"
              @click="problemBoxshows.Op3Boxshow = !problemBoxshows.Op3Boxshow"
            >修改</label>
          </div>
          <el-row v-if="problemBoxshows.Op3Boxshow">
            <el-col :span="18">
              <el-input v-model="choiceOp3"></el-input>
            </el-col>
            <el-col :span="4">
              <label
                class="exam-update"
                @click="problemBoxshows.Op3Boxshow = !problemBoxshows.Op3Boxshow"
              >确定</label>
              <label
                class="exam-update-red"
                @click="problemBoxshows.Op3Boxshow = !problemBoxshows.Op3Boxshow  "
              >取消</label>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="exam-item">
        <el-col :span="2">
          <label>选项4</label>
        </el-col>
        <el-col :span="20">
          <div v-if="!problemBoxshows.Op4Boxshow">
            <span class="exam-item-content">{{choiceOp4}}</span>
            <label
              class="exam-update"
              @click="problemBoxshows.Op4Boxshow = !problemBoxshows.Op4Boxshow"
            >修改</label>
          </div>
          <el-row v-if="problemBoxshows.Op4Boxshow">
            <el-col :span="18">
              <el-input v-model="choiceOp4"></el-input>
            </el-col>
            <el-col :span="4">
              <label
                class="exam-update"
                @click="problemBoxshows.Op4Boxshow = !problemBoxshows.Op4Boxshow"
              >确定</label>
              <label
                class="exam-update-red"
                @click="problemBoxshows.Op4Boxshow = !problemBoxshows.Op4Boxshow  "
              >取消</label>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="exam-item">
        <el-col :span="2">
          <label>答案</label>
        </el-col>
        <el-col :span="20">
          <!-- <div v-if="!problemBoxshows.AnswBoxshow">
            <span class="exam-item-content">{{choiceAnsw}}</span>
            <label class="exam-update" @click="problemBoxshows.AnswBoxshow = !problemBoxshows.AnswBoxshow">修改</label>
          </div>
          <el-row v-if="problemBoxshows.AnswBoxshow">
            <el-col :span="18">
              <el-input v-model="choiceAnsw" ></el-input>
            </el-col>
            <el-col :span="4">
              <label class="exam-update" @click="problemBoxshows.AnswBoxshow = !problemBoxshows.AnswBoxshow">确定</label>
              <label class="exam-update-red" @click="problemBoxshows.AnswBoxshow = !problemBoxshows.AnswBoxshow  ">取消</label>
            </el-col>
          </el-row>-->
          <el-radio v-model="choiceAnsw" label="A">A</el-radio>
          <el-radio v-model="choiceAnsw" label="B">B</el-radio>
          <el-radio v-model="choiceAnsw" label="C">C</el-radio>
          <el-radio v-model="choiceAnsw" label="D">D</el-radio>
        </el-col>
      </el-row>
      <el-row class="exam-item">
        <el-col :span="2">
          <label>解析</label>
        </el-col>
        <el-col :span="20">
          <div v-if="!problemBoxshows.ParseBoxshow">
            <span class="exam-item-content">{{choiceParse}}</span>
            <label
              class="exam-update"
              @click="problemBoxshows.ParseBoxshow = !problemBoxshows.ParseBoxshow"
            >修改</label>
          </div>
          <el-row v-if="problemBoxshows.ParseBoxshow">
            <el-col :span="18">
              <el-input id="examNote-input-box" type="textarea" :rows="5" v-model="choiceParse"></el-input>
            </el-col>
            <el-col :span="4">
              <label
                class="exam-update"
                @click="problemBoxshows.ParseBoxshow = !problemBoxshows.ParseBoxshow"
              >确定</label>
              <label
                class="exam-update-red"
                @click="problemBoxshows.ParseBoxshow = !problemBoxshows.ParseBoxshow  "
              >取消</label>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
  </el-row>
</template>
<script>
import Breadcrumb from "@/components/common/Breadcrumb";
export default {
  name: "ExamEdit",
  components: {
    Breadcrumb
  },
  data() {
    return {
      breadcrumb: [
        { name: "题目管理", path: "problem" },
        { name: "所有题目", path: "problem" },
        { name: "选择题编辑", path: "" }
      ],
      problemBoxshows: {
        // nameBoxshow:false,
        noteBoxshow: false,
        stemBoxshow: false,
        Op1Boxshow: false,
        Op2Boxshow: false,
        Op3Boxshow: false,
        Op4Boxshow: false,
        AnswBoxshow: false,
        ParseBoxshow: false
      },
      choiceParse: this.$route.params.rowData.choiceParse,
      choiceId: this.$route.params.rowData.choiceId,
      choiceProblem: this.$route.params.rowData.problem,
      choiceDifficulty: this.$route.params.rowData.difficulty,
      typeName: this.$route.params.rowData.typeName,
      choiceOp1: this.$route.params.rowData.choiceOp1,
      choiceOp2: this.$route.params.rowData.choiceOp2,
      choiceOp3: this.$route.params.rowData.choiceOp3,
      choiceOp4: this.$route.params.rowData.choiceOp4,
      // choiceAnsw:this.$route.params.rowData.choiceAnsw,
      choiceAnsw: this.$route.params.rowData.choiceAnsw
    };
  },
  methods: {
    register() {
      this.axios
        .post("/choice/update", {
          choiceProblem: this.choiceProblem,
          choiceOp1: this.choiceOp1,
          choiceOp2: this.choiceOp2,
          choiceOp3: this.choiceOp3,
          choiceOp4: this.choiceOp4,
          choiceAnsw: this.choiceAnsw,
          choiceParse: this.choiceParse,
          choiceDifficulty: this.choiceDifficulty,
          choiceId: this.choiceId
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功!"
            });
          } else if (response.data.code == 500) {
            this.$message({
              type: "fail",
              message: "修改失败!"
            });
          }
        });
    },
    goBack() {
      this.$router.push({ name: "problem" });
    }
  }
};
</script>
<style scoped>
/* 自定义的样式 */
#exam-add-box {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
  user-select: none;

  background-color: #f6fafb !important;
}

#breadcrumb {
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdfe6 !important;
  margin-bottom: 30px;
}

#exam-add-box .buttonStyle1 {
  width: 100px;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-left: 15px;
}

#addProblem-box {
  padding-top: 20px;
}

.addProblem-header-item {
  padding-top: 30px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20px;
  background-color: #fafafa;
  /* border: 1px solid #dcdfe6 !important; */
}

.addProblem-header-item .linkButton {
  padding-right: 30px;
  cursor: pointer;
  /* color: rgb(15, 79, 30); */
  font-weight: 700;
}
.addProblem-item {
  margin-bottom: 30px;
}

#exam-box {
  padding-left: 40px;
  padding-right: 40px;
  background-color: #ffffff;
  padding-top: 30px;
  padding-bottom: 20px;
  height: 600px;
}
.exam-item {
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
}
.exam-update {
  padding-left: 25px;
  color: rgb(24, 171, 16);
  margin: 0px;
  cursor: pointer;
}
.exam-update-red {
  padding-left: 25px;
  color: rgb(223, 43, 43);
  margin: 0px;
  cursor: pointer;
}

.exam-item-content {
  padding-left: 20px;
}
.goBack-box {
  text-align: right;
  margin-top: -60px;
  margin-bottom: 30px;
}
</style>
<style>
/* 修改element-ui的样式 */
.el-form-item {
  padding: 0px;
}
.eaxm-problem-table .cell {
  color: #000000;
  text-align: center;
  font-weight: 500;
}
.eaxm-problem-table .has-gutter th:nth-child(2) .cell,
.eaxm-problem-table .el-table__row td:nth-child(2) .cell {
  text-align: left !important;
  padding-left: 30px;
  padding-right: 30px;
}
#examNote-input-box {
  margin-top: 5px;
}
#exam-add-box .buttonStyle2 {
  width: auto;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-right: 10px;
}
.radio1 {
  margin-bottom: 20px;
}
</style>